import React, { useContext } from "react";
import { NavLink } from "react-router-dom";
import classes from "./MyFooter.module.css";
import indexSvg from "../../assets/svg/index.svg";
import analyzeSvg from "../../assets/svg/analyze.svg";
import dateSvg from "../../assets/svg/date.svg";
import themeSvg from "../../assets/svg/theme.svg";
import addSvg from "../../assets/svg/add.svg";
import ThemeContext from "../../store/themeContext";

export default function MyFooter() {
    const ctx = useContext(ThemeContext);
    const handleClick = () => {
        let theme = ctx.theme === "light" ? "dark" : "light";
        ctx.changeTheme(theme);
    };
    return (
        <div className={classes.container} style={{ background: ctx.theme === "light" ? "#f0f1f5" : "#000" }}>
            <ul className={classes.menu}>
                <li>
                    <NavLink to="">
                        <img src={indexSvg} alt="index" />
                    </NavLink>
                </li>
                <li>
                    <NavLink to="analyze">
                        <img src={analyzeSvg} alt="analyze" />
                    </NavLink>
                </li>
                <li className={classes.active}>
                    <NavLink to="add">
                        <img src={addSvg} alt="add" />
                    </NavLink>
                </li>
                <li>
                    <NavLink to="date">
                        <img src={dateSvg} alt="date" />
                    </NavLink>
                </li>
                <li onClick={handleClick}>
                    <img src={themeSvg} alt="theme" />
                </li>
            </ul>
        </div>
    );
}
